<template>
	<div class="tabs">
		<el-tag @contextmenu.native.prevent="showMenu($event,tag,index)" size="small" v-for="(tag,index) in tags" :key="tag.name" 
		:closable="tag.name !== 'home'" :effect="$route.name===tag.name ? 'dark' : 'plain'"
		 @click="changeMenu(tag)" @close="handleClose(tag,index)" >
		 {{tag.label}}
		 </el-tag>
		 <vue-context-menu :contextMenuData="contextMenuData"
		     @closeAll="closeAll" @closeOther="closeOther"
		     @closeThis="closeThis"></vue-context-menu>
	</div>

</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
	name: 'CommonTag',
	data(){
		return{
			curtag:null,
			curIndex:null,
			  contextMenuData: {
				// the contextmenu name(@1.4.1 updated)
				menuName: 'demo',
				// The coordinates of the display(菜单显示的位置)
				axis: {
				  x: null,
				  y: null
				},
				// Menu options (菜单选项)
				menulists: [
				{
					fnHandler: 'closeThis',
					icoName: 'fa fa-home fa-fw',
					btnName: '关闭当前页'
				},
				{
					fnHandler: 'closeOther',
					icoName: 'fa fa-home fa-fw',
					btnName: '关闭其他页'
				},				
				{
				  fnHandler: 'closeAll', // Binding events(绑定事件)
				  icoName: 'fa fa-home fa-fw', // icon (icon图标 )
				  btnName: '关闭全部' // The name of the menu option (菜单名称)
				}, 				
				]
			  }
		}
	},
	computed: {
		...mapState({
			tags: state => state.tab.tabsList
		}),
		...mapState({
			menu: state => state.tab.menu
		}),
	},
	methods:{
		...mapMutations({
			close: 'closeTag'
		}),
		closeTag(tag,index){
			const length = this.tags.length - 1
			this.close(tag)
			// if(tag.name !== this.$route.name){
			// 	return;
			// }
			if(index === length) {
				this.$router.push({
					name: this.tags[index - 1].name
				})
			}
			else {
				this.$router.push({
					name: this.tags[index].name
				})
			}
		},
		changeMenu(item){
			this.$router.push({name:item.name})
		},
		handleClose(tag,index){
			this.closeTag(tag,index)
		},
		showMenu(event,tag,index) {
			this.curtag=tag
			this.curIndex=index
			event.preventDefault()
			var x = event.clientX
			var y = event.clientY
			// Get the current location
		  this.contextMenuData.axis = {
			x, y
		  }
		},
		closeAll() {
		  this.$store.commit('closeAllTag') 
		  this.$router.push({
		  	name: this.tags[0].name
		  })
		},
		closeOther() {
		  this.$store.commit('closeOther',this.curtag) 
		  if(this.curtag.name=='home'){
			  this.$router.push({
			  	name: this.tags[0].name
			  })
		  }
		  else{
			  this.$router.push({
			  	name: this.tags[1].name
			  })
		  }
		},
		closeThis() {
		  this.closeTag(this.curtag,this.curIndex)
		}
	},
	created() {
		let tablist = JSON.parse(localStorage.getItem("tablist"))
		if(tablist){
			this.$store.commit('initTag')  //初始化tablist
		}
	}
}
</script>

<style>
	.contextmenu__item {
	  display: block;
	  line-height: 34px;
	  text-align: center;
	}
	.contextmenu__item:not(:last-child) {
	  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	.menu {
	  position: absolute;
	  background-color: #fff;
	  width: 100px;
	  /*height: 106px;*/
	  font-size: 12px;
	  color: #444040;
	  border-radius: 4px;
	  -webkit-box-sizing: border-box;
	  box-sizing: border-box;
	  border-radius: 3px;
	  border: 1px solid rgba(0, 0, 0, 0.15);
	  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	  white-space: nowrap;
	  z-index: 1000;
	}
	.contextmenu__item:hover {
	  cursor: pointer;
	  background: #66b1ff;
	  border-color: #66b1ff;
	  color: #fff;
	}
</style>
